import React, {Component} from 'react'
// import { Map } from 'react-amap';
import ContentLeft from '../../common/ContentLeft'
import ContentRigth from '../../common/ContentRigth'
import './ContactUs.css'

export default class ContactUs extends Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {
        const content = this.refs.amepContainert
        const map = new window.AMap.Map(content, {
            resizeEnable: true,
            zoom: 13,
            center: [114.421764, 30.479974], //初始地图中心点
        })
        const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            maximumAge: 0,           //定位结果缓存0毫秒，默认：0
            convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true,        //显示定位按钮，默认：true
            buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: false,     //定位成功后将定位到的位置作为地图中心点，默认：true
            // zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });

        geolocation.getCurrentPosition()
        AMap.event.addListener(geolocation, 'complete', (data) => {
            const {lat, lng} = data.position
            const LngLat = new AMap.LngLat(lng, lat)
            const cmName = "我的位置"
            const myPositioiinMarker = new AMap.Marker({
                position: LngLat,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: cmName,
                content: cmName,
                icon:"/images/company.png"
            });
            map.add(myPositioiinMarker);
        })
        AMap.plugin('AMap.Geocoder', function() {
            const geocoder = new AMap.Geocoder({
                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                city: '全国'
            })
            geocoder.getLocation('湖北省武汉市洪山区光谷总部国际2期', function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    // result中对应详细地理坐标信息
                    const {lat, lng} = result.geocodes[0].location;
                    const LngLat = new AMap.LngLat(lng, lat);
                    const cmName = "湖北省楚维法律咨询有限公司"
                    const centerMarker = new AMap.Marker({
                        position: new AMap.LngLat(lng, lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                        title: cmName,
                        // content: cmName,
                        offset: new AMap.Pixel(-10, -10),
                        zoom: 11,
                        icon:"/images/center_icon.png"
                    });
                    console.log(LngLat)
                    map.setCenter(LngLat)
                    map.add(centerMarker);
                }
            })
            // 使用geocoder做地理/逆地理编码
        })

        // var marke1r = new AMap.Marker({
        //     position: new AMap.LngLat(114.41, 30.4),
        //     offset: new AMap.Pixel(-10, -10),
        //     icon: '/images/center_icon.png', // 添加 Icon 图标 URL
        //     title: '北京aaaaa',
        //     zoom: 11
        // });
        // map.add(marke1r);


        AMap.event.addListener(geolocation, 'error', (error) => {
            console.log(error)
            console.log(map)
        })
        map.addControl(geolocation);




        AMap.plugin([
            'AMap.ToolBar',
            'AMap.Scale',
            'AMap.OverView',
            'AMap.MapType',
            'AMap.Geolocation',
        ], function(){
            // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            map.addControl(new AMap.ToolBar());

            // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
            map.addControl(new AMap.Scale());

            // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
            map.addControl(new AMap.OverView({isOpen:true}));

            // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
            // map.addControl(new AMap.MapType());

            // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
            map.addControl(new AMap.Geolocation());
        });
    }

    render() {
        return (
            <div className="ct-at-m">
                <ContentLeft></ContentLeft>
                <ContentRigth>
                    <ul className="ct-c-ct">
                        <li>湖北省楚维法律咨询有限公司</li>
                        <li><span>联系人：</span><span>夏经理</span></li>
                        <li><span>联系电话：</span><span>18171103955</span></li>
                        <li><span>邮箱：</span><span>18171103955@126.com</span></li>
                        <li><span>公司地址：</span><span>湖北省武汉市洪山区光谷总部国际2期-158室</span></li>

                        <li className="ct-c-ct-map">
                            <div style={{width: '100%', height: '100%'}} ref="amepContainert"></div>
                        </li>
                    </ul>
                </ContentRigth>
            </div>
        )
    }
}